<template>
  <div class="kd_search">
    <div class="kd_search_left">
      <div class="kd_search_left_top">
        <el-icon><Search /></el-icon>
        <span>筛选搜索</span>
      </div>
      <div class="kd_search_left_bottom">
        <span>账号/姓名:</span>
        <el-input
          placeholder="请输入账号、姓名"
          v-model="from.keyword"
        ></el-input>
      </div>
    </div>
    <div class="kd_search_right">
      <!-- <el-button @click="createFn">重置</el-button> -->
      <el-button type="primary" @click="searchHandle">查询搜索</el-button>
    </div>
  </div>
  <el-table :data="list">
    <el-table-column prop="name" label="产品名称" />
    <el-table-column prop="subTitle" label="产品介绍" />
  </el-table>
  <div class="kd_pagination">
    <ElConfigProvider :locale="zhCn">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="pageSizeChangeHandle"
        @current-change="pageChangeHandle"
      />
    </ElConfigProvider>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import useTable from "@/hooks/useTable";
import { getProductApi } from "./api";
const from = reactive({
  keyword: "",
});
const {
  list,
  total,
  pageNum,
  pageSize,
  pageChangeHandle,
  pageSizeChangeHandle,
  searchHandle,
} = useTable(getProductApi, from);
</script>

<style lang="scss" scoped>
.kd_search {
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0 5px 5px #eee;
  padding: 20px;
  .kd_search_left {
    .kd_search_left_top {
      font-size: 13px;
      display: flex;
      align-items: center;
      span {
        padding-left: 10px;
      }
    }
    .kd_search_left_bottom {
      width: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      span {
        font-size: 13px;
        padding-right: 10px;
      }
      :deep(.el-input) {
        width: 158px;
        height: 28px;
      }
    }
  }
  .kd_search_right {
  }
}
.kd_pagination {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 20px;
}
</style>
